<template>
	<view>
		<view class="nav-bar">
			<view class="left">
				<image src="../../../static/back_icon.png" @tap="back" mode=""></image>
			</view>
			<view class="center">
				设置推广位
			</view>
			<view class="right" @tap="income">
				新建推广位
			</view>
		</view>
		<view class="promote">
			<view class="propan">
				<view class="top">
					推客联盟
					<image  v-if="defaul==1" class="image" src="/static/personal/label_default.png" mode=""></image>
				</view>
			</view>
			<view class="propan">
				<view class="top-s">
					我爱分享
					<image v-if="defaul==2" class="image" src="/static/personal/label_default.png" mode=""></image>
				</view>
				<view class="btm" @tap="show">
					编辑
				</view>
			</view>
		</view>
		<!-- 编辑 -->
		<tui-modal :show="modal"   :custom="true" :maskClosable="false">
			<view class="content">
				<view class="top">编辑</view>
				<view class="middle">
					<view class="mid-top">
						推广位名称
					</view>
					<view class="mid-middle">
						<input class="input" v-model="input" type="text" value="" />
					</view>
					<view class="mid-btm" @tap="radioe">
						<image :src="radio?'/static/personal/radio.png':'/static/personal/radioed.png'" mode=""></image>
						设为默认
					</view>
				</view>
				<view class="bottom">
					<view class="con con-left" @tap="hide">
						取消
					</view>
					<view class="con"  @tap="confire">
						确认
					</view>
				</view>
			</view>
		</tui-modal>
		<!-- 新建推广位 -->
		<tui-modal :show="modal2"   :custom="true" :maskClosable="false">
			<view class="content">
				<view class="top">新建推广位</view>
				<view class="middle">
					<view class="mid-top">
						推广位名称
					</view>
					<view class="mid-middle">
						<input class="input" v-model="input2" type="text" value="" />
					</view>
					<view class="mid-btm" @tap="radioed">
						<image :src="radio2?'/static/personal/radio.png':'/static/personal/radioed.png'" mode=""></image>
						设为默认
					</view>
				</view>
				<view class="bottom">
					<view class="con con-left" @tap="hide2">
						取消
					</view>
					<view class="con" >
						确认
					</view>
				</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	import tuiModal from "@/components/modal/modal.vue"
	export default {
		components: {
			tuiModal
		},
		data() {
			return {
				modal:false,
				input:'我爱分享',
				radio:true,
				modal2:false,
				radio2:true,
				input2:'',
				//默认·
				defaul:1
			}
		},
		methods: {
			//导航方法
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			confire(){
				this.modal=false;
			},
			hide(){
				this.modal=false;
			},
			show(){
				this.modal=true;
			},
			radioe(){
				this.radio=!this.radio;
			},
			income(){
				this.modal2=true;
			},
			hide2(){
				this.modal2=false;
			},
			radioed(){
				this.radio2=!this.radio2;
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		height: 128upx;
		padding: 40upx 28upx 0;
		background: #E8271B;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		width: 750upx;
		z-index: 9;
	
		.left {
			width: 160upx;
	
			image {
				display: block;
				width: 48upx;
				height: 48upx;
			}
		}
	
		.center {
			width: 180upx;
			line-height: 70px;
			font-size: 36upx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
	
		.right {
			width: 160upx;
			font-size: 32upx;
			font-weight: 500;
			line-height: 70px;
			color: rgba(255, 255, 255, 1);
		}
	}
	.promote{
		padding-top: 168upx;
		display: flex;
		justify-content: space-around;
		align-items:center;
		flex-wrap: wrap;
		.propan{
			margin-bottom: 20upx;
			width:324upx;
			height:236upx;
			background:rgba(255,255,255,1);
			border-radius:20upx;
			.top{
				text-align: center;
				font-size:40upx;
				font-weight:500;
				line-height:230upx;
				color:rgba(51,51,51,1);
				position: relative;
				.image{
					width: 58upx;
					height: 33upx;
					position: absolute;
					left: 0upx;
					top: 30upx;
				}
			}
			.top-s{
				text-align: center;
				font-size:40upx;
				font-weight:500;
				line-height:155upx;
				color:rgba(51,51,51,1);
				border-bottom: 1upx solid #F0F0F0;
				position: relative;
				.image{
					width: 58upx;
					height: 33upx;
					position: absolute;
					left: 0upx;
					top: 30upx;
				}
			}
			.btm{
				text-align: center;
				line-height:80upx;
				font-size:28upx;
				color:rgba(179,179,179,1);
			}
		}
	}
	//模态框
	.content{
		.top{
			text-align: center;
			font-size:30upx;
			font-weight:bold;
			line-height:70upx;
			color:rgba(232,39,27,1);
		}
		.middle{
			height: 250upx;
			.mid-top{
				font-size:28upx;
				font-weight:500;
				line-height:59upx;
				color:rgba(51,51,51,1);
			}
			.input{
				height:80upx;
				border:1upx solid rgba(204,204,204,1);
				opacity:1;
				font-size:36upx;
				border-radius:10upx;
				padding-left: 20upx;
			}
			.mid-btm{
				border-bottom: 1upx solid #F2F2F2;
				margin: 0 -12%;
				padding-left: 12%;
				display: flex;
				align-items: center;
				height: 100upx;
				image{
					display:inline-block;
					margin-top: 0upx;
					margin-right: 10upx;
					width: 32upx;
					height: 32upx;
				}
			}
			
		}
		.bottom{
			display: flex;
			.con{
				text-align: center;
				width: 50%;
				margin-bottom: -15upx;
				font-size:36upx;
				font-weight:500;
				color:rgba(232,39,27,1);
			}
			.con-left{
				color:rgba(51,51,51,1);
				border-right: 1upx solid #F2F2F2;
			}
		}
	}
</style>
